<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="javascripts/jquery-3.3.1.js"></script>
    <script src="javascripts/echarts.js"></script>
    <script>
            function show() {
                $.get('/readData',function (data) {
                    //data为拿到的数据
                    data=JSON.parse(data);
                    var option = {
                        title: {
                            text: '数据分析结果'
                        },
                        legend: {
                            data: data.姓名
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                            }
                        },
                        xAxis:{
                            type: 'category',
                            data: data.姓名
                        },
                        yAxis: {
                            type: 'value',
                        },
                        series: {

                            type: 'bar',
                            data: data.年龄
                        },
                    };
                    var charts =echarts.init(document.getElementById('a'));
                    charts.setOption(option);
                });
            }
    </script>
</head>
<body>
    <h2>数据可视化</h2>
    <button id="start11" onclick="show()">绘图</button>
    <div id="a" style="width: 60%;height: 500px;" class="layui-main"></div>
</body>
</html>